<template>
	<view class="detail-container">
		<view class="info">
			<view class="avatar">
				<van-image width="160" fit="cover" height="160" :src="avatarUrl" />
				<!-- <van-image v-else width="160" height="160" fit="cover" src="/static/icon/213.jpg" /> -->
			</view>
			<view class="info-item text">
				<text class="label width300">姓名</text>
				<input type="text" class="value" placeholder="请输入姓名" value="" v-model="params['姓名']" />
				<!-- <text class="value">{{operatorDetail['姓名']}}</text> -->
			</view>
			<view class="info-item">
				<text class="label width300">电话</text>
				<!-- <text class="value">{{operatorDetail['电话']}}</text> -->
				<input type="text" class="value" placeholder="请输入电话" value="" v-model="params['电话']" />
			</view>
			<view class="info-item">
				<text class="label width300">住址</text>
				<input type="text" class="value" placeholder="请输入住址" value="" v-model="params['住址']" />
				<!-- <text class="value">{{operatorDetail['住址']}}</text> -->
			</view>
			<view class="info-item">
				<text class="label width300">状态</text>
				<text class="value">{{operatorDetail['状态'] === 1 ? '正常': '禁用'}}</text>
			</view>
			<view class="info-item">
				<text class="label width300">身份证号</text>
				<text class="value">{{operatorDetail['身份证号']}}</text>
				<!-- <input type="text" class="value" placeholder="请输入身份证号" value="" v-model="operatorDetail['身份证号']" /> -->
			</view>
			<view class="info-item">
				<text class="label width300">所属单位</text>
				<text class="value">{{operatorDetail['所属单位名称']}}</text>
			</view>
			<view class="info-item">
				<text class="label width300">人员类型</text>
				<text class="value">{{operatorType[operatorDetail['人员类型']]}}</text>
			</view>
			<view class="info-item" v-if="personType !== 3">
				<view class="label width300">负责小区</view>
				<view class="value">{{projectList.join(',')}}</view>
			</view>
			<view class="info-item" v-if="personType !== 3">
				<view class="label width300">负责工单类型</view>
				<view class="value" v-if="operatorDetail['负责工单类型']">{{orderType.join(',')}}</view>
			</view>
			<view class="info-item" v-if="personType !== 3">
				<view class="label width300">工作状态</view>
				<view class="value">{{workStatus[operatorDetail['工作状态']]}}</view>
			</view>
			<view class="info-item" v-if="personType !== 3">
				<view class="label width300">工作日</view>
				<view v-if="operatorDetail['工作日']" class="value">{{operatorDetail['工作日'].join()}}</view>
			</view>
			<view class="info-item" v-if="personType !== 3">
				<view class="label width300">工作时间段</view>
				<view class="value">{{operatorDetail['工作时段开始']}}至{{operatorDetail['工作时段结束']}}</view>
			</view>
			<view class="info-item" v-if="personType !== 3">
				<view class="label width300">休息时间是否派单</view>
				<uni-data-checkbox v-model="operatorDetail['休息时间是否派单']" :localdata="status"></uni-data-checkbox>
				<!-- <view class="value">{{operatorDetail['工作状态']}}</view> -->
			</view>
			<button class="btn" @click="save">保存</button>
		</view>
	</view>
</template>

<script>
	import LbPicker from '@/components/lb-picker/index.vue'
	import { mapState, mapGetters } from 'vuex'
	export default {
		components: {
			LbPicker
		},
		data() {
			return {
				status: [{
						text: '是',
						value: 1
					},
					{
						text: '否',
						value: 2
					}
				],
				operatorDetail: {},
				operatorType: this.$type.operatorType,
				workStatus: this.$type.workStatus,
				dateType: this.$type.dateType,
				intType: this.$type.intType,
				params: {},
				avatarUrl: '',
				projectList: [],
				orderType: []
			}
		},
		onLoad() {
			// this.params.id = +options.id
			this.getOperatorDetail()
		},
		computed: {
			...mapGetters(['personType'])
		},
		methods: {
			getOperatorDetail() {
				this.$http2.post('ticketSystem/operator/info',{id: 0}).then(res => {
					console.log(res)
					if(res.code === 10000){
						// this.operatorDetail = res.data
						this.params = JSON.parse(JSON.stringify(res.data))
						res.data['负责项目不可修改'].forEach(item => {
							this.projectList.push(item.name)
						})
						if(res.data.负责工单类型 !== null) {
							this.orderType = res.data.负责工单类型.map(item => this.$type.ticketType[item])
						}
						this.operatorDetail = JSON.parse(JSON.stringify(res.data))
						this.operatorDetail.工作日 = this.operatorDetail.工作日 &&  this.operatorDetail.工作日.map(item => this.dateType[item])
						// this.personTicketType = this.operatorDetail.负责工单类型
						console.log(this.operatorDetail)
						this.downloadFile(res.data.人脸照片)
					}
				})
			},
			downloadFile(id) {
				this.$http2.post('common/file/download',{id}).then(res => {
					if(res.code === 10000){
						this.avatarUrl = res.data.fileData
					}
				})
			},
			save() {
				if(this.params.姓名.trim() == ''){
					uni.showToast({
						title: '请填写姓名',
						icon: 'none'
					})
				}else if(this.params.电话.trim() == ''){
					uni.showToast({
						title: '请填写电话',
						icon: 'none'
					})
				}else if(this.params.电话.trim() !== '' && /^1[3456789]\d{9}$/.test(this.params.电话) === false){
					uni.showToast({
						title: '请填写正确的电话',
						icon: 'none'
					})
				}else if(this.params.住址.trim() == ''){
					uni.showToast({
						title: '请填写住址',
						icon: 'none'
					})
				}else {
					this.updateUserInfo()
				}
			},
			updateUserInfo() {
				console.log(this.params)
				this.params.负责项目 = this.params.负责项目不可更改
				this.params.休息时间是否派单 = this.operatorDetail.休息时间是否派单
				uni.showLoading({
					title: '保存中',
					mask: true
				})
				this.$http2.post('ticketSystem/operator/update', this.params).then(res => {
					if(res.code === 10000){
						uni.showToast({
							title: '保存成功'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detail-container {
		// padding-bottom: 200rpx;
		background-color: #f5f6f7;
		padding: 30rpx;
		.avatar {
			margin: 0rpx 195rpx 100rpx;
		}
		
		
		.info {
			width: 690rpx;
			padding-right: 30rpx;
			padding-bottom: 60rpx;
			background-color: #fff;
			border-radius: 16rpx;
			padding-top: 40rpx;
			box-shadow: 0px 1px 6px 0px #E9E9E9;
			
			.info-item {
				// width: 690rpx;		
				padding: 20rpx;
				background-color: #fff;		
				display: flex;
				align-items: center;
				border-bottom: 2rpx solid #eee;
				
				// .label{					
				// 	width:200rpx
				// }
				.value{
					flex:1;
					// color: #3F536E
				}
				
			}
			.btn {
				width: 560rpx;
				height: 80rpx;
				color: #fff;
				font-size: 32rpx;
				background: linear-gradient(to right, #3350D9, #1152FC);
				// background: #1152FC;
				border-radius: 8rpx;
				margin: 60rpx 65rpx 0;
			}
			
		}
		
		.width300{
			width: 290rpx;
		}
	}
</style>
